<html>

<head>
    <meta charset="utf-8">
    <title>HTML5 canvas 做画板画图 可以做电子白板</title>
    <style type="text/css">
        <!-- #container {
            position: relative;
        }
        
        #imageView {
            border: 1px solid #000;
        }
        
        -->
    </style>
</head>

<body>
    <div id="container">
        <canvas id="imageView" width="800" height="500"> </canvas>
    </div>
    <script type="text/javascript">
        var canvas;
        var context;
        var tool;
        /** * called on window load. */
        if (window.addEventListener) { window.addEventListener('load', init(), false); }
        /** * init. */ function init() {
            /** * find the canvas element. */
            canvas = document.getElementById('imageView');
            if (!canvas) { return; } if (!canvas.getContext) { return; }
            /** * get the 2D canvas context. */
            context = canvas.getContext('2d'); if (!context) { return; }
            /** * pencil tool instance. */
            tool = new tool_pencil();
            /** * attach the mousedown, mousemove and mouseup event listeners. */
            canvas.addEventListener('mousedown', ev_canvas, false); 
            canvas.addEventListener('mousemove', ev_canvas, false); 
            canvas.addEventListener('mouseup', ev_canvas, false);
        }
        /** * This painting tool * works like a drawing pencil * which tracks the mouse movements. * * @returns {tool_pencil} */
        function tool_pencil() {
            var tool = this; this.started = false; /** * This is called when you start holding down the mouse button. * This starts the pencil drawing. */
            this.mousedown = function (ev) {
                /** * when you click on the canvas and drag your mouse * the cursor will changes to a text-selection cursor * the "ev.preventDefault()" can prevent this. */
                ev.preventDefault(); context.beginPath(); context.moveTo(ev._x, ev._y);
                tool.started = true;
            };
            /** * This is called every time you move the mouse. * Obviously, it only draws if the tool.started state is set to true */
            this.mousemove = function (ev) {
                if (tool.started) {
                    context.lineTo(ev._x, ev._y); context.stroke();
                }
            };
            /** * This is called when you release the mouse button. */
            this.mouseup = function (ev) {
                if (tool.started) {
                    tool.mousemove(ev);
                    tool.started = false;
                }
            };
        }
        /** * general-purpose event handler. * determines the mouse position relative to the canvas element. * * @param ev */
        function ev_canvas(ev) {
            var x, y;
            if (ev.offsetX || ev.offsetY == 0) {
                ev._x = ev.offsetX; ev._y = ev.offsetY;
            }
            /** * call the event handler of the tool. */
            var func = tool[ev.type];
            if (func) {
                func(ev);
            }
        }
    </script>
</body>

</html>